<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>

  <style>
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }


    .right-top {
      width: 100%;
    }

    #list {
      /* width:100%; */
      height: 100%;
      overflow: hidden;
    }

    #list li {
      width: 170px;
      height: 255px;
      padding: 10px;
      background: #ccc;
      margin: 5px;
      float: left;
    }

    #list li p {
      padding: 2px;
      color: #fff;
    }

    #list li img {
      width: 100%;
      height: 180px;
    }
    #list,#page{
      width: 1000px;
      margin: 0 auto;
    }
    #page{
      padding: 0 25px;
    }
    .bewinput .layui-input{
      display: inline-block;
      width: 100px;
    }
    .fromOuter{
      padding:20px 20px 10px;
    }
    .content{
      margin:0 20px 20px;
      padding: 10px;
      box-shadow: 1px 1px 8px #CCCCCC;
    }
	.bewinput .layui-input {
		display: inline-block;
		width: 100px;
	}
  </style>
</head>

<body>
  <div style="height: 100%;">
    <div class="headTitle">
      图片展示
    </div>
    <div class="sideListout">
      <div class="leftBox">
        <div id="test1"></div>
        <div class="hidden">
          <div class="sanjiao" state="false"></div>
        </div>
      </div>
      <div class="rightBox">
        <div class="right-top" id="chartmain">
          <div class="layui-tab-content fromOuter">
            <form action="" class="layui-form">
              <div class="layui-form-item">
				  <div class="layui-col-md10 ">
					  <label class="layui-form-label">叶龄：</label>
					  <div class="layui-input-block bewinput" >
						  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
						  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
					  </div>
				  </div>
                <div class="layui-col-md2" style="text-align: center;">
                  <button class="layui-btn" lay-submit lay-filter="formDemo" onClick="search">查询</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="right-bottom">
            <ul id="list" class="content">

            </ul>
            <div id="page" ></div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>
<script src="../lib/echarts.js"></script>
<script>
  var selectData = [
      {
      id: '',
      name: '请选择'
    },
    {
      id: '1',
      name: '水稻'
    },
    {
      id: '2',
      name: '小麦'
    },
    {
      id: '3',
      name: '玉米'
    },
    {
      id: '4',
      name: '西红柿'
    },
    {
      id: '5',
      name: '土豆'
    },

  ]
  var dataList = [
      {
      id: '1',
      imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
      imgurls: [{
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        }
      ]
    },
    {
      id: '2',
      imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
      imgurls: [{
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        }
      ]
    },
    {
      id: '3',
      imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
      imgurls: [{
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        }
      ]
    },
    {
      id: '4',
      imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
      imgurls: [{
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        },
        {
          src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
        }
      ]
    },
    {
          id: '5',
          imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
          imgurls: [{
              src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
          },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              }
          ]
      },
      {
          id: '5',
          imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
          imgurls: [{
              src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
          },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              }
          ]
      },
      {
          id: '5',
          imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
          imgurls: [{
              src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
          },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              }
          ]
      },
      {
          id: '5',
          imgUrl: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg',
          imgurls: [{
              src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
          },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              },
              {
                  src: 'http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg'
              }
          ]
      }

  ]
  var crop = ''

  layui.use(['table', 'jquery', 'form'], function () {
    var form = layui.form;
    var $ = jQuery = layui.$;
    getData(1) //初始化加载第一radios数据
    /*点击单选框触发事件*/
    form.on('radio(erweima)', function (data) {
      getData(data.value)
    });
    /*下拉框触发事件*/
    form.on("select", function (data) {
      crop = data.value
      getData(1)
    });
  });
  /*树结构*/
  layui.use(['tree', 'util'], function () {
      var tree = layui.tree,
          layer = layui.layer,
          util = layui.util,
          nodes = [{ // 树分支数据
              title: '江西',
              id: 1,
              children: [{
                  title: '南昌',
                  id: 1000,
                  children: [{
                      title: '青山湖区',
                      id: 10001
                  }, {
                      title: '高新区',
                      id: 10002
                  }]
              }, {
                  title: '九江',
                  id: 1001
              }, {
                  title: '赣州',
                  id: 1002
              }]
          }, {
              title: '广西',
              id: 2,
              children: [{
                  title: '南宁',
                  id: 2000
              }, {
                  title: '桂林',
                  id: 2001
              }]
          }, {
              title: '陕西',
              id: 3,
              children: [{
                  title: '西安',
                  id: 3000
              }, {
                  title: '延安',
                  id: 3001
              }]
          }]
      tree.render({
          elem: '#test1',
          data: nodes,
          showLine: false, //是否开启连接线
          click: function (obj) {
              var data = obj.data; //获取当前点击的节点数据
              layer.msg(obj);
          },
          showCheckbox: true,
          oncheck: function (obj) { //勾选时触发获取勾选数据
              alert(obj)
          }
      });
  });
  //分页
  layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
          elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
          count: 50, //数据总数，从服务端得到
          jump: function (obj, first) {
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
          }
      });
  });
  function getSelect(value) {
    for (var i = 0; i < selectData.length; i++) {
      $("#classifyId").append("<option value=\"" + selectData[i].id + "\">" + selectData[i].name + "</option>");
    }
    //重新渲染select
    layui.form.render("select");
  }
  //获取图片数据
  function getData(value) {
    let params = {
      lafeAge: value,
      crop: crop
    }
    $('#list').empty(); //清空原数据
    for (var i = 0; i < dataList.length; i++) {
      $('#list').append('<li><img onClick="clickImg(' + dataList[i].id + ')" src=' + dataList[i].imgUrl + ' />' +
          '<p>' + '陕陕西农民职业培训' + '</p><p>' + '[preset--003]' + '</p><p>' + '1092-3-21 12:02:34' + '</p></li> ');
      $("img").attr("index", i);
    }
  }
  layui.use('laydate', function () {
      var laydate = layui.laydate;

      //时间选择器
      laydate.render({
          elem: '#test4'
          ,type: 'time'
          ,format:'HH:mm'
      });

      //时间选择器
      laydate.render({
          elem: '#test5'
          ,type: 'time'
          ,format:'HH:mm'
      });
  });

  function clickImg(index) {
    console.log(index)
    layer.photos({
      photos: {
        "data": dataList[index].imgurls
      }
      /*,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机*/
    });
  }
</script>
<script src="../js/index.js"></script>